<template>
	<view class="page">
		<u-sticky>
			<view style="background-color: #ffffff;">
				<u-tabs
				:list="navList"
				:current="currentIndex"
				  lineHeight="6rpx"
				  lineColor="#f2270c"
				  lineWidth="60rpx"
				  :activeStyle="{
					  color: '#f2270c',
					  fontWeight: 'bold',
					  transform: 'scale(1.05)'
				  }"
				  :inactiveStyle="{
					  color: '#333333',
					  transform: 'scale(1)'
				  }"
				@click="navClick"></u-tabs>
			</view>
		</u-sticky>
		<no-data v-if="listData.length === 0 && isLoadEnd" :center="true" />
		<view class="list-box" v-else>
			<view class="item-box" 
			v-for="(item,index) in listData" 
			:key="item.order_id">
				<view class="item-box_top">
					<text class="order-number">订单编号: {{item.order_id}}</text>
					<text class="order-type">{{item.type_status}}</text>
				</view>
				<u-line color="#cccccc"></u-line>
				<view class="item-box_center">
					<view class="goods-item" v-for="(gItem,gIndex) in item.goods_list" :key="gItem.goods_id">
						<image class="goods-item_cover" :src="gItem.list_pic_url" ></image>
						<view class="goods-item_center">
							<view class="goods-name u-line-1">{{gItem.name}}</view>
							<view class="goods-desc">{{gItem.spec}}</view>
						</view>
						<view class="goods-item_price">￥{{gItem.price}}*{{gItem.number}}</view>
					</view>
				</view>
				<u-line color="#cccccc"></u-line>
				<view class="item-box_bottom">
					<view class="total-price">实付 {{item.total_amount}}</view>
					<view class="btn-box">
						<view class="btn-box_item" @tap="goDetail(item)">查看详情</view>
						<view v-if="item.order_status == 2" class="btn-box_item">已取消</view>
						<template v-else>
							<template v-if="(currentIndex === 0 && item.pay_status == 0) || (currentIndex === 1 && item.pay_status == 5)">
								<view class="btn-box_item" @tap="onCancel(index,item)">取消订单</view>
								<view class="btn-box_item pay-btn" @tap="onPay(item)">去付款</view>
							</template>
						</template>
					</view>
				</view>
			</view>
		</view>
		<uni-load-more :status="loadStatus" :showText="showText"></uni-load-more>
	</view>
</template>

<script>
	import {mapState} from 'vuex'
	import {getOrderListApi,cancelOrderApi} from '@/api/order.js'
	import {scrollTo} from '@/utils/utils.js'
	export default {
		computed: {
			...mapState(['user_id','token']),
			showText: function() {
				return this.listData.length >= 5 ? true : false
			}
		},
		data() {
			return {
				navList: [
					{
						name: '全部',
						type: 'all'
					},
					{
						name: '代付款',
						type: 'all'
					},
					{
						name: '待发货',
						type: 'all'
					},
					{
						name: '待收货',
						type: 'all'
					},
					{
						name: '待评价',
						type: 'all'
					},
					{
						name: '退换货',
						type: 'all'
					}
				],
				currentIndex: 0,
				page: 1,
				isLoadEnd: false,
				listData: [],
				loadStatus: 'more'
			};
		},
		onLoad({type = 0}) {
			this.currentIndex = parseInt(type) 
			this.getListData()
		},
		onPullDownRefresh() {
			this.page = 1
			this.isLoadEnd = false
			this.getListData()
		},
		onReachBottom() {
			if(this.isLoadEnd) return
			this.page++
			this.getListData()
		},
		methods: {
			// 付款
			onPay({order_id = '',total_amount = ''}) {
				uni.navigateTo({
					url: `/pages/aPackage/pay/pay?order_id=${order_id}&price=${total_amount}`
				})
			},
			// 取消订单
			onCancel(index,{order_id = ''}) {
				uni.showModal({
					title: '取消订单',
					content: '确定取消订单?',
					success: async (e) => {
						if(e.confirm) {
							const res = await cancelOrderApi({
								user_id: this.user_id,
								token: this.token,
								order_id
							})
							uni.showToast({
								title: '取消成功!'
							})
							this.$set(this.listData[index],'order_status',2)
						}
					}
				})
			},
			// 订单详情 
			goDetail({order_id = ''}) {
				uni.navigateTo({
					url: `/pages/aPackage/orderDetail/orderDetail?order_id=${order_id}`
				})
			},
			navClick({index}) {
				this.currentIndex = index
				this.page = 1
				this.isLoadEnd = false
				scrollTo(0)
				this.getListData()
			},
			async getListData() {
				this.loadStatus = 'loading'
				const res = await getOrderListApi({
					status: this.currentIndex,
					user_id: this.user_id,
					token: this.token,
					page: this.page
				})
				uni.stopPullDownRefresh()
				const {pagetotal = 1, order_list = []} = res.data
				if(this.page >= pagetotal) {
					this.isLoadEnd = true
					this.loadStatus = 'noMore'
				}
				if(this.page === 1) {
					this.listData = order_list
					return
				}
				this.listData = this.listData.concat(order_list)
			}
		}
	}
</script>

<style lang="scss" scoped>
@import "@/pages/aPackage/orderList/orderList.scss";
</style>
